<template>
    <div>
        <el-row class="row">
            <el-col :span="6" class="col">
                <el-card shadow="hover" class="card">
                    <div>
                        <div class="bottom clearfix">
                            <img src="../img/people01.png" alt="" class="image" />
                            <el-button type="text" @click="goPage('need')" class="button">人员需求申请</el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6" class="col">
                <el-card shadow="hover" class="card">
                    <div>
                        <div class="bottom clearfix">
                            <img src="../img/zz01.png" alt="" class="image" />
                            <el-button type="text" @click="goPage('Regularization')" class="button">人员转正申请</el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6" class="col">
                <el-card shadow="hover" class="card">
                    <div>
                        <div class="bottom clearfix">
                            <img src="../img/feiy01.png" alt="" class="image" />
                            <el-button type="text" @click="goPage('Expense')" class="button">费用报销申请</el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6" class="col">
                <el-card shadow="hover" class="card">
                    <div>
                        <div class="bottom clearfix">
                            <img src="../img/lvf01.png" alt="" class="image" />
                            <el-button type="text" @click="goPage('travel')" class="button">差旅费报销申请</el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row class="row">
            <el-col :span="6" class="col">
                <el-card shadow="hover" class="card">
                    <div>
                        <div class="bottom clearfix">
                            <img src="../img/qingjia.png" alt="" class="image" />
                            <el-button type="text" @click="goPage('Leave')" class="button">人员请假申请</el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6" class="col">
                <el-card shadow="hover" class="card">
                    <div>
                        <div class="bottom clearfix">
                            <img src="../img/jiaban.png" alt="" class="image" />
                            <el-button type="text" @click="goPage('overtime')" class="button">人员加班申请</el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6" class="col">
                <el-card shadow="hover" class="card">
                    <div>
                        <div class="bottom clearfix">
                            <img src="../img/report01.png" alt="" class="image" />
                            <el-button type="text" @click="goPage('trip')" class="button">工作出差申请</el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6" class="col">
                <el-card shadow="hover" class="card">
                    <div>
                        <div class="bottom clearfix">
                            <img src="../img/huibao.png" alt="" class="image" />
                            <el-button type="text" @click="goPage('report')" class="button">工作汇报申请</el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    data() {
        return {};
    },
    methods: {
        goPage(link) {
            if (link === 'need') {
                this.$router.push({
                    path: '/people_Demand'
                });
            } else if (link === 'Regularization') {
                this.$router.push({
                    path: '/people_Regularization'
                });
            } else if (link === 'Expense') {
                this.$router.push({
                    path: '/Expense_reimbursement'
                });
            } else if (link === 'travel') {
                this.$router.push({
                    path: '/travel_on_business'
                });
            } else if (link === 'Leave') {
                this.$router.push({
                    path: '/LeaveForm'
                });
            } else if (link === 'overtime') {
                this.$router.push({
                    path: '/overtime'
                });
            } else if (link === 'trip') {
                this.$router.push({
                    path: '/business_trip'
                });
            } else if (link === 'report') {
                this.$router.push({
                    path: '/work_report'
                });
            } else {
                this.$router.push({
                    path: '/'
                });
            }
        }
    }
};
</script>
<style scoped>
.row {
    margin-left: 1%;
    margin-bottom: 2%;
    margin-top: 2%;
}
.col {
    padding-right: 5%;
}
.button {
    font-size: 20px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}
.image {
    width: 40%;
    height: 40%;
    align-content: center;
    justify-content: center;
    text-align: center;
    padding-left: 40px;
}
.card{
    width: 95%;
    height: 170px;
}
</style>